<template>
  <div class="edit_container">
    <quill-editor
      v-model="html"
      ref="myQuillEditor"
      :disabled="disabled"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>
<script>
/*
  富文本编辑框
  依赖于vue-quill-editor,所以必须安装 npm i vue-quill-editor
  disabled 布尔类型,是否禁用编辑框,默认false
  父组件通过绑定事件 onEditorChange获取content
  */
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import quillConfig from "../utils/quill-config";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "Editor",
  data() {
    return {
      html: this.content,
      lastEditRange: "",
      editorOption: quillConfig
    };
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    content: {
      type: String,
      default: "",
      required: false
    }
  },

  methods: {
    onEditorReady(event) {
      // 准备编辑器
    },
    onEditorBlur(event) {
      //失去焦点事件
    },
    onEditorFocus(event) {
      //获得焦点事件
      event.enable(!this.disabled);
    },
    onEditorChange(event) {
      //内容改变事件
      this.$emit("onEditorChange", this.html);
    },
    clear() {
      this.html = "";
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  watch: {
    content(val) {
      this.html = val;
    }
  },
  components: {
    quillEditor
  }
};
</script>

<style scoped>
.edit_container >>> .ql-container {
  min-height: 200px !important;
}
</style>
